<template>
    <div class="login">

        <img class="logo-icon" src="@/views/login/static/logo.png"/>

        <van-form @submit="register">
            <van-field
                    v-model="userRegister.userId"
                    name="手机号"
                    label="手机号"
                    type="tel"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />

            <van-field
                    v-model="userRegister.password1"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="userRegister.password2"
                    type="password"
                    name="密码"
                    label="确认密码"
                    placeholder="请再次确认密码"
                    :rules="[{ required: true, message: '请再次确认密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
        <div style="margin: 16px;">
            <van-button round block type="info" v-on:click="toLogin()">账号密码登录</van-button>
        </div>
      <!--  <div style="margin-top: 30px" >
            <van-button style="margin: auto; width: 150px;height: 50px;display: block" type="warning" @click="register()">注册</van-button>
        </div>-->
    </div>
</template>

<script>
    import Vue from 'vue';
    import {ApiService} from "../../axios/apiService";
    import { Image as VanImage,Dialog} from 'vant';
    import { Popup } from 'vant';
    import { Form } from 'vant';
    import md5 from 'js-md5';
    Vue.use(Form);
    Vue.use(Popup);
    const register= new ApiService('/register')

    import {Toast} from 'vant';
    Vue.use(VanImage,Dialog);
    export default {
        name:"register",
        props: {
        },
        data() {
            return {
                userRegister:{
                    userId:null,
                    password1:'',
                    password2:'',
                }
            }
        },
        methods:{
            toLogin(){
                this.$router.push({name:"login"})
            },
            register(){
                console.log("注册账号");
                console.log(this.userRegister.userId);
                if(this.userRegister.password1 != this.userRegister.password2){
                    Toast('两次密码不同');
                }else{
                    var password = md5(this.userRegister.password1)
                    console.log(this.userRegister.userId+"+"+password)
                    register.getParams({
                        userId:this.userRegister.userId,
                        password:password,
                    }).then(res=>{
                        if(res.data.code == 200){
                            Toast("注册成功");
                        }
                        if(res.data.code == 1002){
                            Toast("手机号已注册");
                        }
                        console.log("后端传回响应"+res.data);
                    })

                }

            },
            onSubmit(values) {
                console.log('submit', values);
            },

        }
    };
</script>
<style >
    .logo-icon{
        margin-left: 22%;

    }
    .login .head-icon {
        display: block;
        margin: auto;
    }
    .text {

        margin-top: 50px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .account {
        position: relative;
        margin-top: 5px;
    }
    .password {
        position: relative;
        margin-top: 5px;
    }

</style>
